<template>
  <div id="app">
    <ul class="activity">
      <li>
        <a-checkbox-group @change="onChange" :value="checkedValue">
          <a-checkbox v-for="(item, index) in plainOptions" :value="item" :key="item">
            {{ item }}
          </a-checkbox>
        </a-checkbox-group>
      </li>
    </ul>
    <full-calendar
      :events="calendarData"
      :now="now"
      class="test-fc"
      firstDay="1"
      lang="zh"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
    ></full-calendar>
  </div>
</template>

<script>
import FullCalendar from '@/assets/vue-fullcalendar/fullcalendar.vue';

export default {
  name: 'App',
  components: {
    'full-calendar': FullCalendar
  },
  data() {
    return {
      now: null,
      showNum: 4,
      plainOptions: ['百亿补贴', '限时秒杀', '9块9特卖', '七夕节', 'test', 'test1', 'test2'],
      checkedValue: ['9块9特卖', 'test', 'test1', 'test2'],
      sourceData: [
        {
          title: '百亿补贴', // 事件内容
          start: '2021-8-1', // 事件开始时间
          end: '2021-8-4', // 事件结束时间
          cssClass: 'event_1', // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
          actionId: 8
        },
        {
          title: '百亿补贴', // 事件内容
          start: '2021-8-13', // 事件开始时间
          end: '2021-8-14', // 事件结束时间
          cssClass: 'event_1', // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
          actionId: 7
        },
        {
          title: '限时秒杀',
          start: '2021-8-2',
          end: '2021-8-2',
          cssClass: 'event_2',
          actionId: 1
        },
        {
          title: '限时秒杀',
          start: '2021-8-4',
          end: '2021-8-4',
          cssClass: 'event_2',
          actionId: 2
        },
        {
          title: '限时秒杀',
          start: '2021-8-11',
          end: '2021-8-13',
          cssClass: 'event_2',
          actionId: 3
        },
        {
          title: '七夕节',
          start: '2021-8-13',
          end: '2021-8-16',
          cssClass: 'event_3',
          actionId: 4
        },
        {
          title: '9块9特卖',
          start: '2021-8-6',
          end: '2021-8-9',
          cssClass: 'event_4',
          actionId: 5
        },
        {
          title: '9块9特卖',
          start: '2021-8-15',
          end: '2021-8-16',
          cssClass: 'event_4',
          actionId: 6
        },
        {
          title: 'test',
          start: '2021-8-15',
          end: '2021-8-16',
          cssClass: 'event_5',
          actionId: 9
        },
        {
          title: 'test1',
          start: '2021-8-15',
          end: '2021-8-16',
          cssClass: 'event_6',
          actionId: 10
        },
        {
          title: 'test2',
          start: '2021-8-15',
          end: '2021-8-16',
          cssClass: 'event_7',
          actionId: 11
        }
      ],
      calendarData: []
    };
  },
  created() {
    this.calendarData = this.sourceData.filter(item => {
      return this.checkedValue.includes(item.title);
    });
  },
  methods: {
    // 选择月份
    changeMonth(start, end, current) {
      // console.log('changeMonth', start.format(), end.format(), current.format());
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      console.log('eventClick', event, jsEvent, pos);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      console.log('dayClick', day, jsEvent);
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log('moreCLick', day, events, jsEvent);
    },

    // 复选框
    onChange(checkedList) {
      let len = checkedList.length;
      if (len > this.showNum) {
        alert(`最多可选择${this.showNum}项`);
        checkedList.splice(len - 1, 1);
      } else {
        this.checkedValue = checkedList;
      }
      this.calendarData = [];
      this.calendarData = this.sourceData.filter(item => {
        return this.checkedValue.includes(item.title);
      });
      this.calendarData.forEach(item => {
        item['cellIndex'] = item.cellIndex && null;
      });
    }
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #111;
  margin-top: 60px;
}
.activity {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
}
li {
  list-style: none;
}
.event_1 {
  background: #f1a29d !important;
}
.event_2 {
  background: #a4d0fa !important;
}
.event_3 {
  background: #f6d188 !important;
}
.event_4 {
  background: #fcb3df !important;
}
.event_5 {
  background: #9ce88f !important;
}
.event_6 {
  background: #c4a4fa !important;
}
.event_7 {
  background: #aaf0eb !important;
}
.event_1_hover {
  background: #e4453b !important;
}
.event_2_hover {
  background: #48a2f4 !important;
}
.event_3_hover {
  background: #eda212 !important;
}
.event_4_hover {
  background: #fa67bf !important;
}
.event_5_hover {
  background: #38d11f !important;
}
.event_6_hover {
  background: #8a48f4 !important;
}
.event_7_hover {
  background: #54e0d8 !important;
}
</style>
